﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="Destinos.aspx.cs" Inherits="ABC_SA_WEB.Destinos" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

    <link rel="Stylesheet" type="text/css" href="Styles/cssDestinos.css" />
    <link href="Styles/jquery_notification.css" type="text/css" rel="stylesheet"/> 

    <!--Estilos de Boostrap-->
    <link href="Styles/bootstrap.min.css" rel="Stylesheet" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <!--Archivos javascript de boostrap-->

    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <%--<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>--%>
    <script type="text/javascript" src="Scripts/jquery_notification_v.1.js"> </script>

    <script type="text/javascript">
        //Variables generales
        //Array para almacenar los nuevos marcadores
        var marcadores_nuevos = [];

        //Funcion para quitar marcadores de mapa
        function quitar_marcadores(lista) {
            //Recorrer el array de marcadore
            for (i in lista) {
                //Quitar marcador del mapa
                lista[i].setMap(null);
            }
        }

        $(document).on("ready", function () {

            var formulario = $("#controles").val();

            //COORDENADAS INICIALES -13.163622,-72.545926
            //VARIABLE PARA PUNTO INICIAL
            var punto = new google.maps.LatLng(0, 0);
            //VARIABLE PARA CONFIGURACION INICIAL
            var config = {
                zoom: 2,
                center: punto,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            //VARIABLE MAPA
            var mapa = new google.maps.Map($("#mapa")[0], config);

            google.maps.event.addListener(mapa, "click", function (event) {
                //MOSTRAR UNA ALERTA AL HACER CLICK AL MAPA
                //EL EVENTO CLICK EN EL MAPA OFRECE UN PARAMETRO EVENT
                //EL CUAL DEVUELVE LAS COORDENADAS DE DONDE SE HIZO CLICK! 
                //alert(event.latLng);
                //Coordenadas
                var coordenadas = event.latLng.toString();

                //Remover los parentesis
                coordenadas = coordenadas.replace("(", "");
                coordenadas = coordenadas.replace(")", "");

                //Coordenadas por separado
                var lista = coordenadas.split(",");

                //alert("La coordenada X es " + lista[0]);
                //alert("La coordenada Y es " + lista[1]);

                //Variable para direccion, punto o coordenada
                var direccion = new google.maps.LatLng(lista[0], lista[1]);

                //Variable para marcador
                var marcador = new google.maps.Marker({
                    //titulo: prompt("Titulo del marcador?"),
                    position: direccion, //la direccion del nuevo marcador
                    map: mapa, //en que mapa se ubicara el marcador
                    animation: google.maps.Animation.BOUNCE, //como aparecera el marcador
                    draggable: false
                });

                //Pasar las coordenadas al formulario
                $('#<%=txtX.ClientID%>').val(lista[0]);
                $('#<%=txtY.ClientID%>').val(lista[1]);

                //Dejar solo 1 marcador en el mapa
                //Guardar el marcador en el array
                marcadores_nuevos.push(marcador);

                //Agregar evento click al marcador
                google.maps.event.addListener(marcador, "click", function () {
                    //Mostrar alerta al hacer click
                    //alert(marcador.titulo);
                });

                //Antes de ubicar el marcador en el mapa quitar todos los demas y solo dejar 1
                quitar_marcadores(marcadores_nuevos);

                //Ubicar el marcador en el mapa
                marcador.setMap(mapa);
            });

        });
    </script>

    <script type="text/javascript" src="Scripts/jquery.toastmessage.js"></script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <!--PrincipalDestinos-->
    <div class="principalDestinos" style="background-image:url('/images/brickwall.png'); opacity:0.90;">

        <!--ContenedorTitulo-->
        <div class="tituloPrincipal">
            Administrador de Destinos
        </div>
        <!--/ContenedorTitulo-->

        <!--ContPrincipal-->
        <div class="contenedorPrincipal">

            <!--Textos-->
            <div class="textos">
                <div class="margenTextos">
                    <label>Nombre:</label>
                    <asp:TextBox ID="txtNombre" runat="server"></asp:TextBox>
                </div>
                <div class="margenTextos">
                    <label>Pais:</label>
                    <asp:TextBox ID="txtPais" runat="server"></asp:TextBox>
                </div>
                <div class="margenTextos">
                    <label>Provincia:</label>
                    <asp:TextBox ID="txtProvincia" runat="server"></asp:TextBox>
                </div>
                <div class="margenTextos">
                    <label>Ciudad:</label>
                    <asp:TextBox ID="txtCiudad" runat="server"></asp:TextBox>
                </div>
                <div class="margenTextos">
                    <label>Descripcion:</label>
                    <asp:TextBox ID="txtDescripcion" runat="server"></asp:TextBox>
                </div>
            </div>
            <!--/Textos-->

            <!--GPS-->
            <div class="gps">

                <div class="tituloGps">
                    GPS
                </div>

                <!--ContenedorGPS-->
                <div class="contGps">

                    <!--Mapa-->
                    <div id="mapa"></div>
                    <!--/Mapa-->

                    <!--Controles-->
                    <div id="controles">
                        <div class="panel-group" id="accordion">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Agregar </a>
                                    </h4>
                                </div>
                                <div id="collapseOne" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <div>
                                            <%--<label>
                                                Titulo:</label>
                                            <asp:TextBox ID="txtTitulo" runat="server" CssClass="form-control"></asp:TextBox>--%>
                                        </div>
                                        <br />
                                        <div>
                                            <label>Coordenada X:</label>
                                            <asp:TextBox ID="txtX" runat="server" CssClass="form-control"></asp:TextBox>
                                        </div>
                                        <br />
                                        <div>
                                            <label>Coordenada Y:</label>
                                            <asp:TextBox ID="txtY" runat="server" CssClass="form-control"></asp:TextBox>
                                        </div>
                                        <br />
                                        <div>
                                            <%--<button type="button" id="btn_grabar" class="btn-success">
                                                Guardar</button>
                                            <button type="button" class="btn-danger">
                                                Cancelar</button>--%>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--Controles-->
                
                </div>
                <!--/ContenedorGPS-->

            </div>
            <!--/GPS-->

        </div>
        <!--/ContPrincipal-->

        <!--Imagen-->
        <div class="imagen">

            <div class="imagen1">
                <asp:FileUpload ID="FileUpload1" runat="server" Width="396px" />
            </div>

            <div class="imagen2">
                <asp:Button ID="btnCargar" runat="server" Text="Cargar" OnClick="btnCargar_Click" />
                <asp:Image ID="Image1" runat="server" Width="500px" Height="244px" Visible="false" />
            </div>

        </div>
        <!--/Imagen-->

        <!--Botones-->
        <div class="botones">

            <div class="buttonsContainer">
                <asp:Button CssClass="btn2" ID="btnAgregar" runat="server" Text="Agregar" OnClick="btnAgregar_Click" />
            </div>

            <div class="buttonsContainer">
                <asp:Button CssClass="btn2" ID="btnMostrarLista" runat="server" Text="Mostrar Lista" OnClick="btnMostrarLista_Click" />
            </div>
            <div class="buttonsContainer">
                <asp:Button CssClass="btn2" ID="btnVolver" runat="server" OnClick="btnVolver_Click" Text="Volver" />
            </div>

        </div>
        <!--/Botones-->

    </div>
    <!--/PrincipalDestinos-->

</asp:Content>
